<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件处理时的this指向</title>
    </head>
    <body>

        <h3>事件处理时的this指向</h3>

        <!-- 采用 onEvent 方式指定被调用函数时，为函数传入的 this 是当前的事件目标 -->
        <button type="button" onclick="show(this)">HTML事件处理</button>

        <!-- 采用 javascript:fun(this) 指定被调用函数时，为函数传入的 this 是 window -->
        <a href="javascript:show(this)">HTML事件处理</a>

        <script type="text/javascript">
            function show( x ){
                console.log( '参数:' , x );
                // 严格模式下 this 是 undefined
                // 非严格模式下 this 指向 globalThis (即 window )
                console.log( 'this:' , this );
            }
        </script>

        <hr>

        <button type="button" id="dom-zero">DOM0事件处理</button>

        <script type="text/javascript">
            // let btn = document.getElementById( "dom-zero" );
            let btn = document.querySelector( '#dom-zero' );

            btn.onclick = function( e ){
                'use strict';
                console.log( 'event:' , e );
                let t = e.target ;
                console.log( 'target:' , t );
                console.log( 'this:' , this ); // this指向事件目标(也是绑定事件处理程序的元素)
            }

        </script>

        <button type="button" id="dom-two">DOM2事件处理</button>

        <script type="text/javascript">
            // let btn = document.getElementById( "dom-zero" );
            let btn2 = document.querySelector( '#dom-two' );

            btn2.addEventListener( 'click' , function( e ){
                'use strict';
                console.log( 'event:' , e );
                let t = e.target ;
                console.log( 'target:' , t );
                console.log( 'this:' , this ); // this指向绑定监听器的那个元素
            } , false );

        </script>


    </body>
</html>